<template>
  <div class="produce-info-dialog">
    <el-dialog v-model="visible" :destroy-on-close="true" :title="`${reviseParams.title}车辆`" width="96%" draggable align-center>
      <el-scrollbar height="100%">
        <div class="info-container">
          <el-form ref="ruleFormRef" label-width="100px" label-suffix=" :" :rules="rules" :model="formData" label-position="top">
            <div class="info-form-group">
              <div class="info-form-group-title mb30">基本信息</div>
              <div class="info-form-group-content fr4">
                <el-form-item label="产品类型" prop="type">
                  <el-select
                    v-model="formData.type"
                    placeholder="请选择车"
                    clearable
                    @change="agvTypeChange"
                    @close="closeAgvType"
                  >
                    <el-option v-for="item in getDict('productId')" :key="item.name" :label="item.name" :value="item.id" />
                  </el-select>
                </el-form-item>
                <el-form-item label="产品型号" prop="productCategoryId">
                  <el-select
                    v-model="formData.productCategoryId"
                    placeholder="请选择"
                    clearable
                    @change="agvModelChange"
                    @close="closeAgvModel"
                  >
                    <el-option
                      v-for="item in selectList['productModelList']"
                      :key="item.name"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="所属订单" prop="projectCode">
                  <el-select v-model="formData.projectId" placeholder="请选择" clearable>
                    <el-option
                      v-for="item in selectList['projectList']"
                      :key="item.id"
                      :label="item.nameClone"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="出厂时间" prop="productionTime">
                  <el-date-picker
                    v-model="formData.productionTime"
                    type="date"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    placeholder="请选择"
                  />
                </el-form-item>
              </div>
              <div class="info-form-group-content fr2">
                <div class="info-form-group-content fr2">
                  <el-form-item label="非标定制" prop="nonStandard">
                    <el-select v-model="formData.nonStandard" placeholder="请选择" clearable>
                      <el-option label="是" :value="true" />
                      <el-option label="否" :value="false" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="定制周期（天）" prop="nonStandardCycle">
                    <el-input-number
                      :controls="false"
                      v-model="formData.nonStandardCycle"
                      placeholder="请填写）"
                      clearable
                    ></el-input-number>
                  </el-form-item>
                </div>
                <el-form-item label="定制内容" prop="nonStandardContent">
                  <el-input v-model="formData.nonStandardContent" placeholder="请填写" clearable></el-input>
                </el-form-item>
              </div>
            </div>
            <div class="info-form-group">
              <div class="info-form-group-title mb30">本体信息</div>
              <div class="info-form-group-content fr4">
                <el-form-item label="车架号" prop="code">
                  <el-input v-model="formData.code" placeholder="请输入" clearable></el-input>
                </el-form-item>
                <el-form-item label="仪表ID" prop="deviceId">
                  <el-input v-model="formData.deviceId" placeholder="请输入" clearable></el-input>
                </el-form-item>
                <el-form-item label="主控ID" prop="controllerId">
                  <el-input v-model="formData.controllerId" placeholder="请输入" clearable></el-input>
                </el-form-item>
                <el-form-item label="油缸编号" prop="hydroCylinderCode">
                  <el-input v-model="formData.hydroCylinderCode" placeholder="请输入" clearable></el-input>
                </el-form-item>
                <el-form-item label="驱动电机编号" prop="driveMotorCode">
                  <el-input v-model="formData.driveMotorCode" placeholder="请输入" clearable></el-input>
                </el-form-item>
                <el-form-item label="转向电机编号" prop="steeringMotorCode">
                  <el-input v-model="formData.steeringMotorCode" placeholder="请输入" clearable></el-input>
                </el-form-item>
                <el-form-item label="泵电机编号" prop="pumpMotorCode">
                  <el-input v-model="formData.pumpMotorCode" placeholder="请输入" clearable></el-input>
                </el-form-item>
                <el-form-item label="泵控制器编号" prop="pumpControllerCode">
                  <el-input v-model="formData.pumpControllerCode" placeholder="请输入" clearable></el-input>
                </el-form-item>
                <el-form-item label="轮控制器编号" prop="wheelControllerCode">
                  <el-input v-model="formData.wheelControllerCode" placeholder="请输入" clearable></el-input>
                </el-form-item>
                <el-form-item label="标准货叉外间距（mm）" prop="name">
                  <el-input-number
                    :controls="false"
                    v-model="formData.standardForkSpacing"
                    placeholder="请输入"
                    clearable
                  ></el-input-number>
                </el-form-item>
                <el-form-item label="转向控制器编号" prop="steeringControllerCode">
                  <el-input v-model="formData.steeringControllerCode" placeholder="请输入" clearable></el-input>
                </el-form-item>
                <el-form-item label="激光编号" prop="laserCode">
                  <el-input v-model="formData.laserCode" placeholder="请输入" clearable></el-input>
                </el-form-item>
                <el-form-item label="AE/AR 空载 前轮载荷" prop="aeArEmptyFrontWheelLoad">
                  <el-input v-model="formData.aeArEmptyFrontWheelLoad" placeholder="请输入" clearable></el-input>
                </el-form-item>
                <el-form-item label="AE/AR 空载 后轮载荷" prop="aeArEmptyRearWheelLoad">
                  <el-input v-model="formData.aeArEmptyRearWheelLoad" placeholder="请输入" clearable></el-input>
                </el-form-item>
                <el-form-item label="AE/AR 满载 前轮载荷" prop="aeArFullFrontWheelLoad">
                  <el-input v-model="formData.aeArFullFrontWheelLoad" placeholder="请输入" clearable></el-input>
                </el-form-item>
                <el-form-item label="AE/AR 满载 后轮载荷" prop="aeArFullRearWheelLoad">
                  <el-input v-model="formData.aeArFullRearWheelLoad" placeholder="请输入" clearable></el-input>
                </el-form-item>
                <AddItem v-model:oaLaserCodeList="formData.oaLaserCodeList" />
              </div>
            </div>
            <div class="info-form-group">
              <div class="info-form-group-title mb30">电池信息</div>
              <div class="info-form-group-content fr4">
                <el-form-item label="电池序列号" prop="batterySerialCode">
                  <el-input v-model="formData.batterySerialCode" placeholder="请输入" clearable></el-input>
                </el-form-item>
              </div>
              <div class="info-form-group-content fr4">
                <el-form-item label="电池铭牌信息" prop="batteryNameplate">
                  <UploadImg
                    v-model:image-url="formData.batteryNameplate"
                    width="142px"
                    height="142px"
                    :file-size="10"
                    :prefix-data="PRODUCT"
                  >
                    <template #empty>
                      <span>请上传</span>
                    </template>
                  </UploadImg>
                </el-form-item>
              </div>
            </div>
            <div class="info-form-group">
              <div class="info-form-group-title mb30">装配信息</div>
              <div class="info-form-group-content fr4">
                <AddAssemble v-model:assemblyInfos="formData.assemblyInfos" />
              </div>
            </div>
            <div class="info-form-group mt30" v-for="(item, index) in imageType" :key="`images_${index}`">
              <div class="info-form-group-title mb30">{{ item.value }}</div>
              <div class="info-form-group-content fr1">
                <Upload
                  height="290"
                  v-model:list="formData.productDataList"
                  :type="item.key"
                  accept="image/jpeg,image/png,image/gif"
                >
                  <template #default="{ scope, event }">
                    <div class="custom-image-wrap">
                      <div class="custom-image mb10">
                        <div class="d-upload-add" v-if="isDefault(scope.remark, scope.type) && !scope.path" @click="event">
                          <el-icon><Plus /></el-icon>
                        </div>
                        <img v-else-if="scope.uuid != 1" :src="urlResource + scope.path" alt="" />
                        <video v-else width="100%" height="100%" controls preload="none">
                          <source :src="urlResource + scope.path" type="video/mp4" />
                        </video>
                      </div>
                      <div class="upload-text">
                        <el-input
                          :disabled="isDefault(scope.remark, scope.type)"
                          type="textarea"
                          :rows="1"
                          v-model="scope.remark"
                          placeholder="请填写"
                          clearable
                          resize="none"
                        ></el-input>
                      </div>
                    </div>
                  </template>
                </Upload>
              </div>
            </div>
            <div class="info-form-group mt30" v-for="(item, index) in videoType" :key="`videos_${index}`">
              <div class="info-form-group-title mb30">{{ item.value }}</div>
              <div class="info-form-group-content fr1">
                <Upload height="290" v-model:list="formData.productDataList" :type="item.key" accept="video/mp4">
                  <template #default="{ scope, event }">
                    <div class="custom-image-wrap">
                      <div class="custom-image mb10">
                        <div class="d-upload-add" v-if="isDefault(scope.remark, scope.type) && !scope.path" @click="event">
                          <el-icon><Plus /></el-icon>
                        </div>
                        <video v-else width="100%" height="100%" controls preload="none">
                          <source :src="urlResource + scope.path" type="video/mp4" />
                        </video>
                      </div>
                      <div class="upload-text">
                        <el-input
                          :disabled="isDefault(scope.remark, scope.type)"
                          type="textarea"
                          :rows="1"
                          v-model="scope.remark"
                          placeholder="请填写"
                          clearable
                          resize="none"
                        ></el-input>
                      </div>
                    </div>
                  </template>
                </Upload>
              </div>
            </div>
            <div class="info-form-group mt30" v-for="(item, index) in fileType" :key="`files_${index}`">
              <div class="info-form-group-title mb30">{{ item.value }}</div>
              <div class="info-form-group-content fr1">
                <Upload height="290" v-model:list="formData.productDataList" :type="item.key" accept="*">
                  <template #default="{ scope, event }">
                    <div class="custom-image-wrap">
                      <div class="custom-image mb10">
                        <div class="d-upload-add" v-if="isDefault(scope.remark, scope.type) && !scope.path" @click="event">
                          <el-icon><Plus /></el-icon>
                        </div>
                        <video v-else width="100%" height="100%" controls preload="none">
                          <source :src="urlResource + scope.path" type="video/mp4" />
                        </video>
                      </div>
                      <div class="upload-text">
                        <el-input
                          :disabled="isDefault(scope.remark, scope.type)"
                          type="textarea"
                          :rows="1"
                          v-model="scope.remark"
                          placeholder="请填写"
                          clearable
                          resize="none"
                        ></el-input>
                      </div>
                    </div>
                  </template>
                </Upload>
              </div>
            </div>
            <div class="info-form-group">
              <div class="info-form-group-title mb30">其他信息</div>
              <div class="info-form-group-content fr1">
                <div class="custom">
                  <!-- <div class="info-form-group-content fr1">
                    <Upload
                      height="290"
                      v-model:list="formData.productDataList"
                      :type="3"
                      accept="image/jpeg,image/png,image/gif"
                    >
                      <template #default="{ scope, event }">
                        <div class="custom-image-wrap">
                          <div class="custom-image mb10">
                            <div class="d-upload-add" v-if="isDefault(scope.remark, scope.type) && !scope.path" @click="event">
                              <el-icon><Plus /></el-icon>
                            </div>
                            <img v-else :src="urlResource + scope.path" alt="" />
                          </div>
                          <div class="upload-text">
                            <el-input
                              :disabled="isDefault(scope.remark, scope.type)"
                              type="textarea"
                              :rows="1"
                              v-model="scope.remark"
                              placeholder="请填写"
                              clearable
                              resize="none"
                            ></el-input>
                          </div>
                        </div>
                      </template>
                    </Upload>
                  </div> -->
                  <!-- <el-form-item label="" label-suffix="" prop="performanceParameterTable" class="performanceParameterTable mr40">
                    <UploadImg
                      v-model:image-url="formData.performanceParameterTable"
                      width="142px"
                      height="142px"
                      :file-size="1"
                      :prefix-data="PRODUCT"
                    >
                    </UploadImg>
                  </el-form-item> -->
                  <el-form-item label="非标以及其它信息" label-suffix="" prop="other" class="other">
                    <el-input type="textarea" :rows="6" v-model="formData.other" placeholder="请填写" clearable></el-input>
                  </el-form-item>
                </div>
              </div>
            </div>
          </el-form>
        </div>
      </el-scrollbar>
      <template #footer>
        <el-button @click="visible = false"> 取消 </el-button>
        <el-button type="primary" @click="handleSubmit"> 确定 </el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts" name="UserDrawer">
import { onMounted, inject } from "vue"; // getCurrentInstance
import UploadImg from "@/components/Upload/Img.vue";
import Upload from "./Upload.vue";
import { useDict } from "@/hooks/useDict";
import { PRODUCT } from "@/constants";
import AddItem from "./ItemView.vue";
import AddAssemble from "./AddAssemble.vue";
import { useData } from "./hooks/useData.ts";
import { useAdd } from "./hooks/useAdd.ts";
import { useEdit } from "./hooks/useEdit.ts";
import { useUtils } from "./hooks/useUtils";
import { imageType, videoType, fileType } from "./enum";

/**
 * 变量
 */
const urlResource = inject("urlResource");
const { getProductModelAllFn, isDefault } = useUtils();
const { formData, rules, ruleFormRef, selectList } = useData();
const visible = defineModel("visible", {
  type: Boolean,
  default: false
});
const props = defineProps({
  reviseParams: {
    type: Object,
    default: () => {}
  }
});
const emits = defineEmits(["refresh"]);
const { handleSubmit, initData } =
  props.reviseParams.uiType === 1
    ? useAdd({ title: props.reviseParams.title, emits, ruleFormRef, formData, selectList, visible })
    : useEdit({ title: props.reviseParams.title, emits, ruleFormRef, formData, id: props.reviseParams.id, selectList, visible });
const { getDict } = useDict(["productId"]);

/**
 * 方法
 */
// const rules = reactive({
//   avatarUrl: [{ required: true, message: "请上传用户头像" }],
//   mobile: [{ required: true, pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/, message: "请填写手机号" }],
//   totalIntegral: [{ required: false, pattern: /^[0-9]+$/, message: "只能为数字" }],
//   iceIntegral: [{ required: false, pattern: /^[0-9]+$/, message: "只能为数字" }],
//   status: [{ required: false, message: "请选择状态" }],
//   productionTime: [{ required: true, message: "请选择车出厂时间" }]
// });

const agvTypeChange = async (val: string) => {
  const data = await getProductModelAllFn(val);
  selectList.value["productModelList"] = data;
  formData.value.productCategoryId = undefined;
  formData.value.productCategoryName = "";
  formData.value.picture = "";
};
const closeAgvType = () => {
  selectList.value["productModelList"] = [];
  formData.value.productCategoryId = undefined;
  formData.value.productCategoryName = "";
  formData.value.picture = "";
};
const agvModelChange = (val: string) => {
  const model: any = selectList.value["productModelList"].find(item => item.id === val);
  if (model) {
    formData.value.picture = model.picture;
    formData.value.productCategoryName = model.name;
  }
};
const closeAgvModel = () => {
  formData.value.productCategoryName = "";
  formData.value.picture = "";
};
onMounted(async () => {
  initData && initData();
});
</script>
<style lang="scss" scoped>
@for $i from 1 through 4 {
  .fr#{$i} {
    grid-template-columns: repeat(#{$i}, 1fr);
  }
}
.info-container {
  box-sizing: border-box;
  height: 70vh;
  padding-right: 20px;
}
:deep(.el-dialog__body) {
  --el-fill-color-blank: #f7fcfe;
  --el-select-border-color-hover: transparent;
  --el-select-border-color: transparent;
  --el-border-color: transparent;
  --el-input-border-color: transparent;
  .el-upload {
    background-color: var(--input-background) !important;
  }

  padding: 30px 0 0 20px;
  .el-select,
  .el-cascader,
  .el-input-number,
  .el-date-editor {
    width: 100%;
    .el-input__inner {
      text-align: left;
    }
  }
  .performanceParameterTable {
    flex: 0 0 142px;
  }
  .other {
    flex: 1;
  }
}
.el-form-item--default {
  margin-bottom: 30px;
}
.info-form-group {
  display: flex;
  flex-flow: column nowrap;
  &-title {
    font-size: 16px;
    font-weight: 600;
    color: #333333;
  }
  &-content {
    display: grid;
    column-gap: 40px;
    .custom {
      display: flex;
      flex-flow: column nowrap;
    }
    .custom-image-wrap {
      width: 100%;
      height: 100%;
    }
    .custom-image {
      width: 240px;
      height: 240px;
      background: #f7fcfe;
      .d-upload-add {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        cursor: pointer;
        background: #f7fcfe;
        &:hover {
          border: 1px dashed $primary-color;
        }
      }
      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }
    .upload-text {
      box-sizing: border-box;
      height: 51px;
      padding: 10px;
      background-color: #f7fcfe;
      :deep(.el-textarea__inner) {
        color: #333333;
        background: #ffffff;
      }
    }
    .custom-video {
      display: flex;
      flex-flow: column nowrap;
      justify-content: space-between;
      width: 100%;
      height: 100%;
      background: var(--input-background);
      video {
        width: 100%;
        height: 135px;
        object-fit: contain;
      }
    }
  }
  &-content-fr2 {
    grid-template-columns: 1fr 3fr;
  }
  &-content-fr1 {
    display: grid;
    grid-template-columns: 142px auto;
    column-gap: 40px;
  }
}
</style>
